<template>
  <div class="app-container">
    <el-form :model="formData" ref="form" size="small" label-position="top" label-width="68px">
      <el-form-item label="引用流程" prop="processDefinitionId">
        <el-cascader v-model="formData.processDefinitionId" :options="flowData" clearable filterable
          :show-all-levels="false" style="width:40%;"
          :props="{ expandTrigger: 'click', multiple: false, checkStrictly: false, value: 'id', label: 'name' }"
          disabled>
        </el-cascader>
        <el-descriptions>
          <el-descriptions-item label="表单信息">{{ currFlow.description }}</el-descriptions-item>
          <el-descriptions-item label="流程版本">{{ currFlow.version }}</el-descriptions-item>
          <el-descriptions-item label="部署时间">{{ currFlow.publishTime }}</el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="事项主题" prop="title">
            <el-input v-model="formData.title" disabled />
          </el-form-item>

        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="截至日期" prop="endTime">
            <el-date-picker v-model="formData.endTime" style="width: 240px" disabled
              value-format="yyyy-MM-dd" type="date" />
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item label="事项内容" prop="content">
        <div v-html="formData.content" class="content-wrap">
        </div>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getNoticeDetail } from '@/api/enterprise/info';
import { getProcessDefinitionList } from "@/api/bpm/definition";

export default {
  data() {
    const { id } = this.$route.query;
    return {
      id,
      formData: {
        id: '',
        processDefinitionId: [],
        publishTime: '',
        title: "",
        endTime: '',
        content: ''
      },
      flowData: [],
      currFlow: {
        description: '',
        version: '',
        publishTime: ''
      }
    };
  },
  created() {
    Promise.all([this.getFlowList(), this.getDetail()]).then(([flowData, processDefinitionId]) => {
      this.currFlow = flowData.filter(({ id }) => processDefinitionId)[0] || {}
    })
  },
  methods: {
    /** 查询流程定义列表 */
    async getFlowList() {
      const res = await getProcessDefinitionList({
        suspensionState: 1
      })
      const flowData = res?.data || [];
      this.flowData = flowData;
      return flowData;
    },
    async getDetail() {

      const { data } = await getNoticeDetail({ id: this.id });
      this.formData = {
        ...(data || {}),
        processDefinitionId: data.processDefinitionId ? [data.processDefinitionId] : []
      };
      return data.processDefinitionId
    },

  },
}
</script>

<style scoped>
.content-wrap {
  padding: 20px;
  background-color: #F5F7FA;
  border: 1px solid #dfe4ed;
  border-radius: 4px;
  height: 500px;
  overflow-y: auto;
}
</style>
